
<!DOCTYPE html>
<html>
<head>
    <title>商务风格表格的设计与实现</title>
    <style type="text/css">
        #table1{
            width: 100%;
            border-color: orange;
            color: black;
        }
        #t1{
            background-color: orange;
        }
        th{
            font-variant-position: center;
            width: 200px;
            border: 1px solid darkorange;
        }
        tr:nth-child(odd){
            background-color: grey;
        }
        tr:nth-child(even){
            background-color: white;
        }
    </style>
</head>
<body>
    <h1>商务风格表格的设计与实现</h1>
    <hr>
    <table id="table1" border="1">
        <caption>招聘信息表</caption>
        <tr id = "t1">
            <th>地点</th>
            <th>招聘职位</th>
            <th>公司</th>
        </tr>
        <tr>
            <th>全国</th>
            <th>产品培训生</th>
            <th>腾讯</th>
        </tr>
        <tr>
            <th>全国</th>
            <th>前端开发工程师</th>
            <th>阿里巴巴</th>
        </tr>
                <tr>
            <th>上海</th>
            <th>交互设计师</th>
            <th>网易游戏</th>
        </tr>
                <tr>
            <th>北京</th>
            <th>视觉设计师</th>
            <th>360</th>
        </tr>
                <tr>
            <th>深圳</th>
            <th>数据分析师</th>
            <th>IBM</th>
        </tr>
                <tr>
            <th>杭州</th>
            <th>数据研发工程师</th>
            <th>微软</th>
        </tr>
    </table>
</body>
</html>
